<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="item.options" :key="item.id" @click="swipeClick($event, index)">
				<view class="content-box">
					<text>{{ item.content }}</text>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			swipeList: [
				{
					id: 0,
					options: [
						{
							text: '添加',
							style: {
								backgroundColor: 'rgb(255,58,49)'
							}
						}
					],
					content: 'item1'
				},
				{
					id: 1,
					options: [
						{
							text: '置顶'
						},
						{
							text: '删除',
							style: {
								backgroundColor: 'rgb(255,58,49)'
							}
						}
					],
					content: 'item2'
				},
				{
					id: 2,
					options: [
						{
							text: '置顶'
						},
						{
							text: '标记为已读',
							style: {
								backgroundColor: 'rgb(254,156,1)'
							}
						},
						{
							text: '删除',
							style: {
								backgroundColor: 'rgb(255,58,49)'
							}
						}
					],
					content: 'item3'
				}
			]
		};
	},
	methods: {
		swipeClick(e, index) {
			let { content } = e;
			if (content.text === '删除') {
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: res => {
						if (res.confirm) {
							this.swipeList.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else if (content.text === '添加') {
				if (this.swipeList.length < 6) {
					this.swipeList.push({
						id: new Date().getTime(),
						options: [
							{
								text: '置顶'
							},
							{
								text: '标记为已读',
								style: {
									backgroundColor: 'rgb(254,156,1)'
								}
							},
							{
								text: '删除',
								style: {
									backgroundColor: 'rgb(255,58,49)'
								}
							}
						],
						content: '新增' + new Date().getTime()
					});
					uni.showToast({
						title: `添加了一条数据`,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: `最多有六条数据`,
						icon: 'none'
					});
				}
			} else {
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				});
			}
		}
	}
};
</script>
<style>
.content-box {
	flex: 1;
	height: 44px;
	line-height: 44px;
	padding: 0 15px;
	position: relative;
	background-color: #fff;
	border: 1px solid #f5f5f5;
}
</style>
